<!-- 个人主页  -->
<template>
  <div id="ps-home">
    <!-- 个人资料 显示区域 --->
    <div class="psc">
      <el-image src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                style="width: 200px; height: 200px;"></el-image>

      <div class="box">
        <div>
          <!-- 个人昵称 --->
          <span class="name">{{ user.nickName }}</span>

          <!-- 个人等级 --->
          <span class="lv">LV.{{ user.lv }}</span>

          <!-- 编辑个人资料 --->
          <router-link to="/update"  tag="el-button">编辑个人资料</router-link>
        </div>

        <!-- 分割线 --->
        <el-divider></el-divider>

        <!-- 动态、关注、粉丝 数目显示区域 --->
        <div>
          <ul>
            <router-link :to="childLink[i]" tag="li" v-for="(item, i) of user.userData" :key="i">
              <span>{{ item.counts }}</span>
              <br/>
              <span>{{ item.label }}</span>
            </router-link>
          </ul>
        </div>
      </div>
    </div>

    <!-- 歌单、动态、关注、粉丝 显示区域 --->
    <router-view class="mt"></router-view>
  </div>
</template>

<script>
export default {
  name: "User",

  beforeMount() {
    let userId = this.$cookies.get('defaultUserId');
    this.user = this.$cookies.get(userId); // 初始化 用户对象

    // 检测用户是否登录
    if(this.user.isLogin) {
      this.$store.state.isLogin = true;
    } else {
      // 如果用户未登录，则跳转到首页
      this.$router.push('/home');
    }
  },

  data () {
    return {
      // 用户对象
      user: null,

      childLink: [
        '/user/event',
        '/user/follows',
        '/user/fans',
      ]
    }
  },

}
</script>

<style lang="less" scoped>
@import "../public/less/user";
</style>